<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>使用 Construct3 制作游戏 | hez2010</title>
  
  
  
  <!--link rel="stylesheet" href="//cdn.jsdelivr.net/highlight.js/9.10.0/styles/github-gist.min.css"-->
  
<link rel="stylesheet" href="//cdn.jsdelivr.net/highlight.js/9.10.0/styles/github-gist.min.css">

  
<link rel="stylesheet" href="/css/style.css">

<!-- hexo injector head_end start -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hexo-math@4.0.0/dist/style.css">
<!-- hexo injector head_end end --><meta name="generator" content="Hexo 5.1.1"></head>

<body>
<div class="Shell">
    <aside class='SideBar'>
    <section class='avatar' style="background-image: url()">
        <div class='av-pic' style="background-image: url(/assets/avatar.jpg)">
        </div>
    </section>
    <section class='menu'>
        <div>hez2010</div>
        
            <div>软件工程导论</div>
        
        <ul>
          
            <a href="/" class="Btn">
              <li>Home</li>
            </a>  
          
            <a href="/archives/" class="Btn">
              <li>Archive</li>
            </a>  
          
        </ul>
    </section>
    <section class="media">
        
            
                <a target="_blank" rel="noopener" href="https://github.com/hez2010">
                    <img src="/assets/github.svg" />
                </a>
            
        
    </section>
</aside>

    <div class="container">
        <div data-pager-shell>
            <div>
  <article class='ContentView'>
    <header class='PageTitle'>
        <h1>使用 Construct3 制作游戏</h1>
    </header>

    <section>
      <h1 id="使用-Construct3-制作游戏"><a href="#使用-Construct3-制作游戏" class="headerlink" title="使用 Construct3 制作游戏"></a>使用 Construct3 制作游戏</h1><p>该项目我采用了 Construct3 做了一个简单的 Flappy Bird。</p>
<p>首先，绘制游戏的主界面，主界面只需要将背景、图片等作为素材插入到布局当中即可，并提供一个按钮用来跳转到游戏界面的布局：</p>
<p><img src="/assets/3/1.jpg" alt="1.jpg"></p>
<a id="more"></a>

<p>为了实现跳转，在 Event Sheet 中为按钮添加 On clicked Event，并添加 Go to Game 布局页的 Action。</p>
<p><img src="/assets/3/2.jpg" alt="2.jpg"></p>
<p>然后首页就完成了。</p>
<p>Game 页则是游戏的主体部分，较为复杂：</p>
<p>首先将素材放入主界面，包括上下的柱子、鸟、顶部和底部的砖块以及一段表示分数的文字：</p>
<p><img src="/assets/3/3.jpg" alt="3.jpg"></p>
<p>然后给鸟设置一个 Platform 的行为让它自由落体：</p>
<p><img src="/assets/3/4.jpg" alt="4.jpg"></p>
<p>紧接着添加一个事件，使得每点击一次让鸟的高度上升：</p>
<p><img src="/assets/3/5.jpg" alt="5.jpg"></p>
<p>于是，一个鸟的部分就完成了。</p>
<p>然后设置失败条件，当碰到上下砖块或者柱子则跳转到 Over 界面：</p>
<p><img src="/assets/3/6.jpg" alt="6.jpg"></p>
<p>添加一些全局变量，分别表示移动速度、当前分数和时钟周期：</p>
<p><img src="/assets/3/9.jpg" alt="9.jpg"></p>
<p>在每个 Tick（时钟）触发时，将柱子和砖块等元素向左平移，营造出鸟在向右飞行的感觉，此外，将全局变量 TimeTick 减去 1：</p>
<p><img src="/assets/3/7.jpg" alt="7.jpg"></p>
<p>当 TimeTick 减到 0 时，将 TimeTick 恢复到 100，这 100 个 Tick 周期用来创建新的柱子和加 10 分（因为每经过这个周期就表示鸟成功飞过了一个柱子），加分后还需要更新界面上的分数表示：</p>
<p><img src="/assets/3/8.jpg" alt="8.jpg"></p>
<p>注意到如果砖块一直向左平移的话，因为素材不是无限长的，因此未来一定会出现砖块消失的情况，因此在平移到一定程度时，将砖块的位置恢复到最初的位置，这样的话就能营造出有无限长砖块的感觉：</p>
<p><img src="/assets/3/10.jpg" alt="10.jpg"></p>
<p>最后，每当 Game 界面载入时，将 TimeTick 重置为 100 以便重新开始计时：</p>
<p><img src="/assets/3/11.jpg" alt="11.jpg"></p>
<p>如此一来，游戏部分就完成了。最后是游戏结束界面，只需要显示得分，并提供一个重新开始的按钮即可：</p>
<p><img src="/assets/3/12.jpg" alt="12.jpg"></p>
<p>对应的 Event Sheet：</p>
<p><img src="/assets/3/13.jpg" alt="13.jpg"></p>
<h2 id="效果展示"><a href="#效果展示" class="headerlink" title="效果展示"></a>效果展示</h2><p>视频链接：<a target="_blank" rel="noopener" href="https://hez2010-my.sharepoint.com/:v:/p/i/EUhmsfFEZlxAl37G9TdPM34BojcGlXK0ZxYB_qdhQteN1g?e=MptOUi">Flappy Video</a></p>
<p>项目文件（请右键使用新标签页打开）：<a href="/assets/3/Flappy.c3p">Flappy.c3p</a></p>
<p>游戏连接（请右键使用新标签页打开）：<a href="/assets/flappy/index.html">Flappy Bird</a></p>


      

    </section>
    
      <section class='ArticleMeta'>
          <div>
            发布于&nbsp;
            <time datetime="2020-10-07T14:39:14.830Z" itemprop="datePublished">
              2020-10-07
            </time>
          </div>
          
      </section>
    
    
</article>

  
</div>

            <footer>
    <div>© 2021 - Steven He </div>
    <div>
        <span>
            Powered by <a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a>
        </span>
        ,
        <span>
            Theme - <a target="_blank" rel="noopener" href="https://github.com/nameoverflow/hexo-theme-icalm">Icalm</a>
        </span>
    </div>
</footer>

        </div>
    </div>
</div>

<script src="/js/pager/dist/singlepager.js"></script>

<script>
var sp = new Pager('data-pager-shell')

</script>
</body>
</html>